<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col :flex="toggle?'260px':'30px'" style="margin-right: 12px;background-color: #fff;">
      <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
    </a-col>
    <a-col flex="auto">
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
            <z-form-item
              :datas="fieldArr"
              :form="queryParam"
              :submitAction="{show: true, span: 6}"
              @onSubmit="onQuery"
              @onReset="onResetForm"
            >
              <!--//自定义筛选时间-->
              <template slot="slots-time">
                <a-select style="width: 49%;margin-right:2%;" v-model="year" placeholder="请选择年份" @change="change('year', $event)">
                  <a-select-option v-for="item in yearDateArr" :key="item" :value="item" >{{ item }}年</a-select-option>
                </a-select>
                <a-select style="width: 49%" v-model="month" placeholder="请选择月份" @change="change('month', $event)">
                  <a-select-option v-for="item in monthDateArr" :key="item" :value="item" >{{ item }}月</a-select-option>
                </a-select>
              </template>
            </z-form-item>
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table
            ref="table"
            rowKey="userId"
            :showAlert="false"
            :showSelection="false"
            :loading="loading"
            :columns="columns"
            :dataSource="pageData"
            @change="onTableChange"
          />
        </div>
        <!--弹窗区域-->
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import * as serviceApi from '@/api/sjsk/clinicmanageService'
import departTree from '../../modules/departTree'

export default {
  components: { departTree },
  data() {
    return {
      loading: false,
      toggle: true,
      queryParam: {},
      signInDictOptions: [
        // { text: '请选择', value: '' },
        { text: '从未签到', value: '2' },
        { text: '今日已签到', value: '3' },
        { text: '今日未签到', value: '4' }
      ],
      typeDictOptions: [
        // { text: '请选择', value: '' },
        { text: 'APP', value: '1' },
        { text: '短信', value: '2' },
        { text: '小程序', value: '3' },
      ],
      fieldArr: [
        {label: '人员姓名', prop: 'name', tagType: 'input', span: 6},
        {label: '身份证号', prop: 'identityCard', tagType: 'input', span: 6},
        {label: '签到情况', prop: 'signIn', tagType: 'dict-select', dictOptions: [], span: 6},
        {label: '签到类型', prop: 'type', tagType: 'dict-select', dictOptions: [], span: 6},
        {label: '筛选时间', prop: 'time', span: 6},
      ],
      year: undefined,
      month: undefined,
      yearDateArr: [],
      monthDateArr: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 50,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 60,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '身份证号',
          dataIndex: 'identityCard',
          width: 120,
          align: 'left',
          customRender: text => {
            return <j-ellipsis value={text} length={18} />
          }
        },
        {
          title: '签到类型',
          dataIndex: 'type',
          width: 70,
          align: 'center',
          customRender:(text)=> {
            return text? this.$options.filters.filterArray(text, this.typeDictOptions, 'value', 'text'): '--'
          }
        },
        {
          title: '今日签到情况',
          dataIndex: 'signIn',
          width: 90,
          align: 'center',
          customRender:(text)=> {
            return text? this.$options.filters.filterArray(text, this.signInDictOptions, 'value', 'text'): '--'
          }
        },
        {
          title: '最新签到时间',
          dataIndex: 'lastSignInTime',
          width: 100,
          align: 'center',
          customRender: text => {
            return text?text:'--'
          }
        },
        {
          title: '本月签到天数',
          dataIndex: 'curMonthSignInDays',
          width: 100,
          align: 'center',
          customRender: text => {
            return text?text:'--'
          }
        },
        {
          title: '漏签到天数',
          dataIndex: 'missSignInDays',
          width: 80,
          align: 'center',
          customRender: text => {
            return text?text:'--'
          }
        },
        
        {
          title: '实际签到率',
          dataIndex: 'signInRate',
          width: 80,
          align: 'center',
          customRender: text => {
            return text?text+'%':'--'
          }
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          customRender: (text, record, index) => {
            return (
              <span class="action-button">
                <a-button type="link" onClick={event => this.handleRouter(record)}>签到详情</a-button>
              </span>
            )
          }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  watch: {
    'year'(value, oldVal){
      if(value)this.$set(this.queryParam, 'signInYears', this.month?value+'-'+this.month:value)
    },
    'month'(value, oldVal){
      if(value)this.$set(this.queryParam, 'signInYears', this.year+'-'+value)
    },
    // 筛选时间
    'queryParam.signInYears'(newVal, oldVal){
      this.onQuery()
    },
    // 组织机构树-联动筛选人员列表
    'queryParam.departmentId'(newVal, oldVal){
      this.onQuery()
    }
  },
  created() {
    this.getDateArr();
    this.getMonth();
  },
  async mounted() {
    this.fieldArr.forEach(item => {
      let d = [{ text:"请选择", value:"" }]
      if(item.prop==='signIn') {
        item.dictOptions = [...d, ...this.signInDictOptions]
      } 
      if(item.prop==='type') {
        item.dictOptions = [...d, ...this.typeDictOptions]
      }
    })
    // this.onQuery()
  },
  methods: {
    // 获取最近五年的年份
    getDateArr(bool=false) {
      let yearDate = new Date().getFullYear()
      this.year = yearDate
      if(bool) return
      for (let i = 0; i < 5; i++) {
        this.yearDateArr.push(yearDate--);
      }
    },
    // 获取整年的全部月份
    getMonth(bool=false) {
      let monthDate = new Date().getMonth() + 1;
      this.month = monthDate < 10 ? "0" + monthDate : monthDate.toString();
      if(bool) return
      let monthLenth = monthDate;
      this.monthDateArr = [];
      for (let i = 0; i < monthLenth; i++) {
        let month = monthDate--;
        let monthFormat = month < 10 ? "0" + month : month.toString();
        this.monthDateArr.push(monthFormat);
      }
    },
    change(dateType, value) {
      if(dateType==='year') { // 年选择
        if (new Date().getFullYear() === value) {
          this.getMonth();
        } else {
          this.monthDateArr = [ "12", "11", "10", "09", "08", "07", "06", "05", "04", "03", "02", "01" ];
        }
      }
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.getDateArr(true)
      this.getMonth(true)
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let queryParam = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      serviceApi
        .getSignInList(queryParam)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
          } else {
            this.$message.warn(res.message?res.message:'请求失败')
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    handleRouter(record) {
      this.$router.push({
        path: `/signIn/details/${record.userId}`,
        query: {
          caseNo: record.caseNo
        }
      })
    },
    // 选中组织架构树，赋值到人员列表搜索框
    getTreeData(datas, id) {
      console.log(datas, id)
      this.$set( this.queryParam, 'departmentId', id )
    },
    // 组织架构树展开收起
    toggleBool(bool) {
      this.toggle = bool
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>
